<template>
	<view>
		<navbar :nav_title="talkInfo.nickname" :role="talkInfo.role" @buy="buy"></navbar>
		<view class="">
			<view class="" v-for="(item,index) in chatList">
				<view class="flex flex-column align-center w-100 pt-4" v-if="item.role == 'other'">
					<view class="flex flex-center" style="width: 93%; font-size: 23rpx; color: #999;"
						v-if="index == 0 || (index != 0 && item.publish_time - chatList[index-1].publish_time > 300)">
						<uni-dateformat :date="item.publish_time"
							:format="isToday(item.publish_time) ?  'hh:mm': 'M/dd hh:mm'"
							:threshold="[0,0]"></uni-dateformat>
					</view>
					<view class="flex flex-row" style="width: 93%; margin-bottom: 60rpx;">
						<!-- 头像 -->
						<image :src="item.role == 'me' ? userInfo.avater : talkInfo.avater"
							style="width: 85rpx; border-radius: 15rpx;" mode="widthFix">
						</image>
						<!-- 昵称 + 消息 -->
						<view class="flex flex-column" style="max-width: 85%; padding-left: 15rpx; height: 100rpx;">
							<view class="pb-1" style="font-size: 25rpx;">
								{{item.role == 'me' ? userInfo.nickname : talkInfo.nickname}}
							</view>
							<view class="p-2" style="font-size: 28rpx; background-color: #fff; border-radius: 10rpx;">
								{{item.text}}
							</view>
						</view>
					</view>
				</view>


				<view class="flex flex-column align-center w-100 pt-4" v-if="item.role == 'me'">
					<view class="flex flex-center" style="width: 93%; font-size: 23rpx; color: #999;"
						v-if="index == 0 || (index != 0 && item.publish_time - chatList[index-1].publish_time > 300000)">
						<uni-dateformat :date="item.publish_time"
							:format="isToday(item.publish_time) ?  'hh:mm': 'M/dd hh:mm'"
							:threshold="[0,0]"></uni-dateformat>
					</view>

					<view class="flex flex-row justify-end" style="width: 93%; margin-bottom: 60rpx;">
						<!-- 昵称 + 消息 -->
						<view class="flex flex-column align-end"
							style="max-width: 85%; padding-right: 15rpx; height: 100rpx;">
							<view class="pb-1" style="font-size: 25rpx;">
								{{item.role == 'me' ? userInfo.nickname : talkInfo.nickname}}
							</view>
							<view class="p-2" style="font-size: 28rpx; background-color: #fff; border-radius: 10rpx;">
								{{item.text}}
							</view>
						</view>
						<!-- 头像 -->
						<image :src="item.role == 'me' ? userInfo.avater : talkInfo.avater"
							style="width: 85rpx; border-radius: 15rpx;" mode="widthFix">
						</image>
					</view>
				</view>



			</view>
			<view class="" style="height: 100rpx;">

			</view>
		</view>
		<!-- 输入框 -->
		<view class="inputBox flex  align-center p-2"
			style="background-color:#f7f7f7; width: 100%;  position:fixed; bottom: 0; ">
			<view class="input" style="width: 82%; ">
				<u--input placeholder="说点什么..." style="border-radius: 35rpx;" border="surround"
					v-model="input"></u--input>
			</view>
			<view class="ml-2 flex justify-center align-center" @click="submitMsg"
				style="width: 80rpx; height: 80rpx; border-radius: 50rpx; background-color: #b987ff;">
				<i class="el-icon-s-promotion"></i>
			</view>
		</view>

	</view>
</template>

<script>
	const db = uniCloud.database()
	const dbcmd = db.command
	const addChatList = uniCloud.importObject('addChatList', {
		customUI: true
	})

	export default {
		data() {
			return {
				input: "",
				talkInfo: {},
				userInfo: {},
				chatList: [],
				today: Date.now(),
				order_id: ""

			};
		},
		async onLoad(e) {
			uni.showLoading({

			})
			await uni.getStorage({
				key: 'jiajiao_demo_account',
				success: res => {
					this.userInfo = res.data
				}
			})
			await db.collection('jiajiao_users').doc(e.id).field('avater,nickname,role').get().then(res => {
				this.talkInfo = res.result.data[0]
			})

			await db.collection('chatHistory').where(dbcmd.or({
				talk_id: e.id,
				me_id: this.userInfo._id
			}, {
				talk_id: this.userInfo._id,
				me_id: e.id
			}, )).get().then(res => {
				res.result.data.forEach(item => {
					if (item.me_id == this.userInfo._id) {
						item.chatList.forEach(chat => {
							chat.role = "me"
						})
					} else {
						item.chatList.forEach(chat => {
							chat.role = "other"
						})
					}
					this.chatList = [...item.chatList, ...this.chatList]
				})
				this.chatList.sort((a, b) => a.publish_time - b.publish_time)
				uni.hideLoading()
			})
		},
		methods: {
			buy() {
				let exitOrder = false
				uni.showModal({
					title: '确定选择该老师吗？',

					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中'
							});

							await db.collection('order').where({
								submit_user: this.talkInfo._id
							}).get().then(res => {
								this.order_id = res.result.data[0]._id
							})

							await db.collection('jiajiao_users').where({
								_id: this.userInfo._id,
								orderList: dbcmd.in([this.order_id])
							}).get().then(res => {
								if (res.result.data.length > 0)
									exitOrder = true
								else
									exitOrder = false
							})

							if (!exitOrder) {
								addChatList.addMyOrder(this.userInfo._id, this.order_id).then(res => {
									uni.hideLoading()
									uni.navigateTo({
										url: "/pages/myOrderList/myOrderList"
									})
								})
							}
							else 
							{
								uni.hideLoading()
								uni.showToast({
									title:"您已经下过单了哟~",
									icon:"none"
								})
							}

						}
					}
				})
			},

			async submitMsg() {
				let talk_id = this.talkInfo._id
				let user_id = this.userInfo._id
				let msg = {
					'text': this.input,
					'publish_time': Date.now()
				}
				this.chatList.push({
					'text': this.input,
					'publish_time': Date.now(),
					'role': 'me'
				})
				this.input = ''
				await addChatList.addChatList(talk_id, user_id, msg)

			},
			isToday(timestamp) {
				const today = new Date().toDateString();
				const dateToCheck = new Date(timestamp).toDateString();
				return today === dateToCheck;
			}

		}


	}
</script>

<style>
	page {
		background-color: #f6eefe;
	}

	::v-deep .el-input>:focus {
		border: 2px solid #a855f7 !important;
	}

	::v-deep .el-input__inner {
		color: #a855f7;
	}
</style>